<template>
  <div class="head">
    <el-row>
      <el-col style="background-color:#fff;" :span="24">
        <div class="title1">
          <span class="text">777176569404565</span>
          <i style="margin-left:12px;font-size:24px;" color="#333333" class="el-icon-document-copy" />
          <button class="bt">普通件</button>
          <button class="bt1">普通赔付</button>
          <div class="title2">
            <div class="text" />
            <div class="text1 text3">已完成</div>
            <div class="text2 text3">『智能遗失』 --『遗失 / 网点到件遗失』</div>
            <img class="img" src="@/static//image/sjian.png" alt="">
            <div class="text3" style="margin-left: 5px;">2023-11-22 01:43:49</div>
          </div>
        </div>

      </el-col>
    </el-row>
    <el-row>
      <el-col style="margin-top: 24px;" :span="17">
        <el-col>
          <div class="title3">
            <div class="text">
              <div class="text1">调查经过</div>
            </div>
            <div class="title4">
              <div class="text2">
                <div class="text3">内件实际价值</div>
                <div class="text3 text5">滞留开始时间</div>
                <div class="text4">2023-11-16 05:43:00</div>
                <div class="text3 text6">品名</div>
              </div>
              <div class="text2">
                <div class="text3 text7">特征</div>
              </div>
              <div class="text2" style="margin-top: 29px;">
                <div class="text3">面单附件</div>
                <div class="text3" style="margin-left: 282px;">举证附件</div>
                <div class="text3" style="margin-left: 298px;">价值凭证附件</div>
              </div>
              <div class="text2">
                <div class="text3 text7">价值凭证类型</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col style="margin-top: 24px;">
          <div class="title5">
            <div class="text">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="处理结果" name="first">用户管理</el-tab-pane>
                <el-tab-pane label="理赔信息" name="second">
                  <div class="title6">
                    <div class="tex">调查经过</div>
                    <div class="text1">
                      <div class="text2">投诉网点</div>
                      <div class="text2 text3">投诉网点联系人</div>
                      <div class="text2 text4">投诉时间</div>
                    </div>
                  </div>
                  <div class="title6">
                    <div class="text1">
                      <div class="text5">辽宁盘锦公司<img style="margin-left: 9px;" src="@/static/image/kxq.png" alt=""></div>
                      <div class="text6">2023-11-22 01:43:49</div>
                    </div>
                  </div>
                  <div class="title6">
                    <div class="text1">
                      <div class="text2">被投诉网点1</div>
                      <div class="text2" style="margin-left: 193px;">被投诉网点2</div>
                      <div class="text2" style="margin-left: 199px;">被投诉网点3</div>
                    </div>
                  </div>
                  <div class="title6">
                    <div class="text1">
                      <div class="text5">辽宁盘锦公司<img style="margin-left: 9px;" src="@/static/image/kxq.png" alt=""></div>
                    </div>
                  </div>
                  <div class="title6" style="margin-top: 30px;">
                    <div class="tex">运单信息</div>
                    <div class="text1">
                      <div class="text2">发件人</div>
                      <div class="text2" style="margin-left: 243px;">发件人电话</div>
                      <div class="text2" style="margin-left: 207px;">发件人详细地址</div>
                    </div>
                  </div>
                  <div class="title6">
                    <div class="text1">
                      <div class="text7">王某某<img style="margin-left: 9px;" src="@/static/image/guan.png" alt=""></div>
                      <img style="width: 20px;height: 16px;margin-top: 3px;margin-left: 234px;" src="@/static/image/kan.png" alt="">
                      <img style="width: 20px;height: 16px;margin-top: 3px;margin-left: 276px;" src="@/static/image/kan.png" alt="">
                    </div>
                  </div>
                  <div class="title6" style="margin-top: 30px;">
                    <div class="text1">
                      <div class="text2">发件人</div>
                      <div class="text2" style="margin-left: 243px;">发件人电话</div>
                      <div class="text2" style="margin-left: 207px;">发件人详细地址</div>
                    </div>
                  </div>
                  <div class="title6">
                    <div class="text1">
                      <img style="width: 20px;height: 16px;margin-top: 3px;margin-left: 13px;" src="@/static/image/kan.png" alt="">
                      <img style="width: 20px;height: 16px;margin-top: 3px;margin-left: 279px;" src="@/static/image/kan.png" alt="">
                      <img style="width: 20px;height: 16px;margin-top: 3px;margin-left: 276px;" src="@/static/image/kan.png" alt="">
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="轨迹&订单" name="third">角色管理</el-tab-pane>
                <el-tab-pane label="协作任务" name="fourth">定时任务补偿</el-tab-pane>
                <el-tab-pane label="工单" name="fourth1">定时任务补偿</el-tab-pane>
                <el-tab-pane label="服务记录" name="fourth2">定时任务补偿</el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col :span="7">
        <div class="title7">
          <div class="text">
            <div class="text1">操作日志</div>
            <div class="line" />
          </div>
          <div class="text2">
            <div class="text3">
              <div class="text4" />
              <div class="text5">自动完结成功</div>
            </div>
            <div class="text6">
              <div class="text7" />
              <div class="text8">此件发件方已弃件处理，下账为0元。
                处理人: SYSTEM (SYSTEM)
                2023-11-23 09:52:19</div>
            </div>
          </div>
          <div class="text2">
            <div class="text3">
              <div class="text4" />
              <div class="text5">已失效</div>
            </div>
            <div class="text6">
              <div class="text7" />
              <div class="text8">此件已[人工弃件]。
                处理人: 车丽楠-朝阳 (辽宁盘锦公司)
                2023-11-23 09:50:18</div>
            </div>
          </div>
          <div class="text2">
            <div class="text3">
              <div class="text4" />
              <div class="text5">预处理成功</div>
            </div>
            <div class="text6">
              <div class="text7" />
              <div class="text8">处理人: SYSTEM (SYSTEM)
                2023-11-22 01:43.48</div>
            </div>
          </div>
          <div class="text2">
            <div class="text3">
              <div class="text4" />
              <div class="text5">创建投申诉单</div>
            </div>
            <div class="text6">
              <div class="text8" style="margin-left: 37px;">2023-11-22 01:43.48</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {

  components: {},
  data() {
    return {
      activeName: 'second'
    }
  },

  computed: {},

  created() {},

  methods: {}
}

</script>
<style  scoped lang="scss">
.head{
  background-color:#F5F5F5;
  padding:30px;
  // height:100vh;
}
.title1{
  padding:24px 30px;
  .text{
    font-size: 24px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #333333;
  }
  .bt{
    width: 72px;
height: 32px;
background: #30C86D;
border-radius: 2px;
margin-left:30px;
border:1px #30C86D solid;
color:#fff;
  }
  .bt1{
    width: 88px;
height: 32px;
background: #EE3000;
border-radius: 2px;
margin-left:16px;
border:1px #EE3000 solid;
color:#fff;

  }
}
.title2{
  display: flex;
  margin-top: 17px;
  .text{
    width: 14px;
height: 14px;
background: #30C86D;
border-radius: 50%;
  }
  .text1{
margin-left: 5px;
  }
  .text2{

margin-left: 31px;
  }
  .text3{
    font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
  }
  .img{
    margin-left: 31px;
  }
}
.title3{
  background-color: #fff;
  .text{
    height: 58px;
    background-color: #E7F3FB;
    .text1{
      font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 600;
color: #333333;
line-height: 58px;
margin-left: 30px;
    }
  }
  .title4{
    padding: 30px 32px;
    .text2{
      display: flex;
      .text3{
        font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
line-height: 24px;
      }
      .text5{
        margin-left: 247px;
      }
      .text4{
        margin-left: 5px;
        font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 600;
color: #333333;
line-height: 24px;
      }
      .text6{
        margin-left: 69px;
      }
      .text7{
        margin-top: 29px;
      }
    }
  }
}
.title5{
  background-color: #fff;
  .text{
    padding: 14px 24px;
    .title6{
      .tex{
        font-size: 20px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #333333;
      }
      .text1{
        display: flex;
        margin-top: 19px;
        .text2{
          font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
line-height: 24px;
        }
        .text3{
          margin-left: 224px;
        }
        .text4{
          margin-left: 170px;
        }
        .text5{
          font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #2087D0;
line-height: 24px;
        }
        .text6{
          font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
line-height: 24px;
margin-left: 458px;
        }
        .text7{
          font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 600;
color: #333333;
line-height: 24px;
        }
      }
    }
  }
}
.title7{
  height: 834px;
background: #FFFFFF;
border: 1px solid #EBECEE;
margin-top: 24px;
margin-left: 24px;
.text{
  .text1{
    font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 600;
color: #333333;
margin: 24px;
  }
  .line{
    width: 478px;
height: 1px;
background: #D8D8D8;
border-radius: 1px;
margin-left: 24px;
  }
}
.text2{
  padding-left: 30px;
  padding-top: 21px;
  .text3{
    display: flex;
    .text4{
      width: 20px;
height: 20px;
background: #2087D0;
border-radius: 50%;
    }
    .text5{
      font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 600;
color: #333333;
margin-left: 18px;
    }
  }
  .text6{
    display: flex;
margin-top: 16px;

    .text7{
      width: 1px;
height: 69px;
background: #EBECEE;
margin-left: 10px;
    }
    .text8{
      width: 255px;
      font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
line-height: 24px;
margin-left: 27px;
    }
  }
}
}
</style>
